<template>
  <div>
    <!-- table -->
    <a-card :bordered="false">
      <a-row>
        <a-col :sm="8" :xs="24">
          <head-info title="$t('videoList.dqd')" :content="readyCnt" :bordered="true"/>
        </a-col>
        <a-col :sm="8" :xs="24">
          <head-info title="$t('videoList.yxz')" :content="runningCnt" :bordered="true"/>
        </a-col>
        <a-col :sm="8" :xs="24">
          <head-info title="$t('videoList.yjs')" :content="stopCnt"/>
        </a-col>
      </a-row>
    </a-card>
    <a-card style="margin-top: 24px">
      <div class="table-operator">
        <div style="margin-bottom:15px;">
          {{ $t('videoList.lxsx') }}:
          <a-radio-group @change="handleChangeType" defaultValue="-1">
            <a-radio-button value="-1">{{ $t('videoList.qb') }}</a-radio-button>
            <a-radio-button value="1">{{ $t('videoList.dy') }}</a-radio-button>
            <a-radio-button value="2">{{ $t('videoList.hs') }}</a-radio-button>
            <a-radio-button value="3">{{ $t('videoList.ws') }}</a-radio-button>
            <a-radio-button value="4">{{ $t('videoList.ks') }}</a-radio-button>
          </a-radio-group>
        </div>
        <a-button type="primary" icon="plus" @click="handleClickAdd">{{ $t('videoList.xj') }}</a-button>
        <a-button :loading="loadingRunAll" @click="handleClickRunAll">{{ $t('videoList.yjqd') }}</a-button>
      </div>
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="false"
        :loading="dataLoading"
      >
        <template slot="main_title" slot-scope="text, record">
          <span v-if="record.weight>0" style="color:red;">[{{ $t('videoList.zd') }}]</span>
          <span>{{text}}</span>
        </template>
        <template slot="url" slot-scope="text">
          <template v-if="text">
            <a :href="text" target="_blank">{{ $t('videoList.ck') }}</a>
          </template>
          <template v-else>{{ $t('videoList.wtx') }}</template>
        </template>
        <template slot="status" slot-scope="text">
          <template v-if="text==0">
            <template>{{ $t('videoList.wqd') }}</template>
          </template>
          <template v-else-if="text==1">
            <span style="color:green">{{ $t('videoList.jxz') }}</span>
          </template>
          <template v-else>
            <span style="color:gray">{{ $t('videoList.yjs') }}</span>
          </template>
        </template>
        <template slot="operation" slot-scope="text, record">
          <span>
            <a style="color:#2db7f5;" @click="handleClickSetTop(record.id)">
              <span v-if="record.weight != 10">{{ $t('videoList.zd') }}</span>
              <span v-else>{{ $t('videoList.qxzd') }}</span>
              <a-divider type="vertical" />
            </a>
            <a v-if="record.status != 1" @click="handleClickRun(record.id)">
              {{ $t('videoList.qd') }}
              <a-divider type="vertical" />
            </a>
            <a-popconfirm title="$t('videoList.sfyjsm')" @confirm="handleClickStop(record.id)">
              <a style="color:orange">{{ $t('videoList.js') }}</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a-popconfirm title="$t('videoList.sfysccx')" @confirm="handleClickDelete(record.id)">
              <a style="color:red">{{ $t('videoList.sc') }}</a>
            </a-popconfirm>
          </span>
        </template>
      </a-table>
      <div style="margin-top:15px;">
        <MyPage :curr="page.curr" :size="page.size" :all="page.total" @changePage="handleChangePage" @changePageSize="handleChangePageSize"/>
      </div>
      <create-form ref="createModal" @ok="handleAddOk" />
    </a-card>
  </div>
</template>

<script>
import HeadInfo from '@/components/tools/HeadInfo'
import CreateForm from './CreateForm'
import { mixin, mixinDevice } from '@/utils/mixin'
import MyPage from '../Page'

export default {
  name: 'AdvancedForm',
  mixins: [mixin, mixinDevice],
  components: {
    CreateForm,
    HeadInfo,
    MyPage
  },
  data () {
    return {
      description: this.$t('videoList.bhdyhswsks'),
      loading: false,
      dataLoading: false,
      // table
      columns: [
        {
          title: this.$t('videoList.lx'),
          dataIndex: 'type_text',
          key: 'type_text',
          scopedSlots: { customRender: 'type_text' }
        },
        {
          title: this.$t('videoList.mc'),
          dataIndex: 'title',
          key: 'title',
          scopedSlots: { customRender: 'main_title' }
        },
        {
          title: this.$t('videoList.ms'),
          dataIndex: 'desc',
          key: 'desc',
          scopedSlots: { customRender: 'desc' }
        },
        {
          title: this.$t('videoList.jdyq'),
          dataIndex: 'scope',
          key: 'scope',
          scopedSlots: { customRender: 'scope' }
        },
        {
          title: this.$t('videoList.lj'),
          dataIndex: 'url',
          key: 'url',
          scopedSlots: { customRender: 'url' }
        },
        {
          title: this.$t('videoList.mdjl'),
          dataIndex: 'single_reward',
          key: 'single_reward',
          scopedSlots: { customRender: 'single_reward' }
        },
        {
          title: this.$t('videoList.rwsl'),
          dataIndex: 'cnt',
          key: 'cnt',
          scopedSlots: { customRender: 'cnt' }
        },
        {
          title: this.$t('videoList.sy'),
          dataIndex: 'remain',
          key: 'remain',
          scopedSlots: { customRender: 'remain' }
        },
        {
          title: this.$t('videoList.dqzs'),
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: this.$t('videoList.cz'),
          key: 'action',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: [],
      errors: [],
      readyCnt: 0,
      runningCnt: 0,
      stopCnt: 0,
      loadingRunAll: false,
      page: {
        curr: 1,
        size: 20,
        total: 0
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    handleClickAdd () {
      this.$refs.createModal.add()
    },
    getList (type) {
      let url = '/task/list?page=' + this.page.curr + '&size=' + this.page.size
      if (type !== undefined) {
        url += '&type=' + type
      }
      this.$http.get(url).then(res => {
        this.data = res.list
        this.page.total = res.total
        this.readyCnt = 0
        this.stopCnt = 0
        this.runningCnt = 0
        this.data.forEach(item => {
          if (item.status === 0) {
            this.readyCnt++
          } else if (item.status === 1) {
            this.runningCnt++
          } else {
            this.stopCnt++
          }
        })
      }).catch(err => {
        this.$notification.error({
          message: this.$t('videoList.sb'),
          description: err.message
        })
      })
    },
    handleClickSetTop (id) {
      this.$http.post('/task/set_top', this.$qs.stringify({
        id: id
      })).then(res => {
        if (res.code === 0) {
          this.$notification.success({
            message: this.$t('videoList.cg'),
            description: res.msg
          })
          this.getList()
        } else {
          this.$notification.error({
            message: this.$t('videoList.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('videoList.sb'),
          description: err.message
        })
      })
    },
    handleClickRun (id) {
      // 2
      this.$http.post('/task/run', this.$qs.stringify({
        id: id
      })).then(res => {
        if (res.code === 0) {
          this.$notification.success({
            message: this.$t('videoList.cg'),
            description: res.msg
          })
          this.getList()
        } else {
          this.$notification.error({
            message: this.$t('videoList.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('videoList.sb'),
          description: err.message
        })
      })
    },
    handleClickStop (id) {
      this.$http.post('/task/stop', this.$qs.stringify({
        id: id
      })).then(res => {
        if (res.code === 0) {
          this.$notification.success({
            message: this.$t('videoList.cg'),
            description: res.msg
          })
          this.getList()
        } else {
          this.$notification.error({
            message: this.$t('videoList.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t("momentList.sb"),
          description: err.message
        })
      })
    },
    handleClickDelete (id) {
      this.$http.post('/task/delete', this.$qs.stringify({
        id: id
      })).then(res => {
        const newData = this.data.filter(item => item.id !== id)
        this.data = newData
      }).catch(err => {
        this.$notification.error({
          message: this.$t("momentList.sb"),
          description: err.message
        })
      })
    },
    handleClickRunAll () {
      this.loadingRunAll = true
      this.data.forEach((item) => {
        if (item.status !== 1) {
          this.handleClickRun(item.id)
        }
      })
      setTimeout(() => {
        this.loadingRunAll = false
      }, 20000)
    },
    handleAddOk (form) {
      this.$http.post('/task/add', this.$qs.stringify(form)).then(res => {
        if (res.code === 0) {
          this.getList()
          this.$notification.success({
            message: this.$t("momentList.cg"),
            description: res.msg
          })
        } else {
          this.$notification.error({
            message: this.$t("momentList.sb"),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t("momentList.sb"),
          description: err.message
        })
      })
    },
    handleSubmit (e) {
      e.preventDefault()
    },
    handleChangeType (e) {
      this.getList(e.target.value)
    },
    handleChangePageSize (size) {
      this.page.size = size
      this.getList()
    },
    handleChangePage (page) {
      this.page.curr = page
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
  .card{
    margin-bottom: 24px;
  }
</style>
